<template>
  <div>
    <my-model :title="`节目预览`" :visible="visible" :width="788" :footer="false" @cancel="show(false, {})">
      <div class="play-tab">
        <div class="view">
          <div id="edit">
            <div class="screen">
              <div class="layer1"></div>
              <div class="layer2"></div>
            </div>
            <canvas id="screen_size"></canvas>
          </div>
        </div>
        <div class="handle-box margin-t-10">
          <div class="screenpreview">
            <div class="prevpage"></div>
            <div class="page">1/1</div>
            <div class="nextpage"></div>
            <div class="playani" @click="playAni"></div>
          </div>
          <div class="tool r-float">
            <a-button @click="changeZoom('+')" type="primary" icon="plus"></a-button>
            <a-button @click="changeZoom('-')" class="margin-l-10" type="primary" icon="minus"></a-button>
          </div>
        </div>
      </div>
      
    </my-model>
  </div>
</template>

<script>
import MyModel from '../../components/model/MyModel';
import { detailById } from '@/services/program';
import LedScreen from '@/utils/LedScreen';
import eqled from '@/const/eqLed.js';
import $ from 'jquery';


export default {
  name: 'preview',
  components: {
    MyModel,
  },
  data() {
    return {
      form: {},
      visible: false,
      imgUrl: '',
      showLed:false,
      width:0,
      height:0,
      options: {
        pro:{
          width: 224,
          height: 64,
          zoom: 1
        },
        windowInfoList: []
      },
    };
  },
  methods: {
    changeZoom(flag){
      this.ledScreen.changeZoom(flag);
      this.ledScreen.updatePartitionBlock();
      $("#edit").attr("class", "zoom" + this.options.pro.zoom);
      this.ledScreen.drawScreenSize();
    },
    playAni(){
      this.ledScreen.stopAni();
      this.ledScreen.playAni();
    },
    //获取预览显示字号
    getShowFontSize(fontName, fontSize){
      let showFontSize = '';
      if(fontName == '宋体'){
        showFontSize = eqled.songfontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '楷体'){
        showFontSize = eqled.kaifontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '黑体'){
        showFontSize = eqled.heifontSizeMap[fontSize]['fontSize'];
      } else if(fontName == '微软雅黑'){
        showFontSize = eqled.yaheifontSizeMap[fontSize]['fontSize'];
      }
      return showFontSize;
    },
    show(state, data) {
      console.log(state, data);
      this.visible = state;
      this.showLed = state;
      if (state) {
        const proId = data.proId;
        detailById(proId).then((res) => {
          if (res.data.code == 0) {
            console.log(res.data.data);
            let form = res.data.data;
            this.form.devId = form.devId;
            this.form.tagId = form.tagId;
            this.tempFormList = form.windowInfoList;
            this.options.pro.width = form.xdpi || 500;
            this.options.pro.height = form.ydpi || 200;
            for (let i = 0; i < this.tempFormList.length; i++) {
              console.log(this.tempFormList[i]);
              let content = {};
              if (this.tempFormList[i].type != 4) {
                content = JSON.parse(this.tempFormList[i].content);
              } else {
                content.content = this.tempFormList[i].content;
                content.row = this.tempFormList[i].row;
                content.column = this.tempFormList[i].column;
                content.tableUrl = this.tempFormList[i].tableUrl;
              }
              content.type = this.tempFormList[i].type;
              content.winName = this.tempFormList[i].winName;
              content.key = this.tempFormList[i].key;
              let form;
              if(this.tempFormList[i].type == 1 || this.tempFormList[i].type == 2){
                form = {
                  ...content.actionCommon,
                  ...content.areaCommon,
                  ...content.fontCommon,
                  winName: content.winName,
                  key: content.key,
                  type: content.type,
                  content: content.content,
                };
                form.showFontSize = this.getShowFontSize(form.fontName, form.fontSize);
              } else if(this.tempFormList[i].type == 3){
                form = {
                  ...content.actionCommon,
                  ...content.areaCommon,
                  ...content.fontCommon,
                  winName:content.winName,
                  key:content.key,
                  type:content.type,
                  dateStyle:content.dateStyle,
                  showYear:content.showYear,
                  showMonth:content.showMonth,
                  showDay:content.showDay,
                  showWeek:content.showWeek,
                  showHour:content.showHour,
                  showMinute:content.showMinute,
                  showSecond:content.showSecond,
                  yearStyle:content.yearStyle,
                  isMoreLine:content.isMoreLine,
                  fontCommon:{
                    fontName: ''
                  },
                  actionCommon:{},
                  areaCommon:{}
                }
                form.showFontSize = this.getShowFontSize(form.fontName, form.fontSize);
              } else {
                let contentArr = []
                if(content.content){
                  contentArr = JSON.parse(content.content)
                }
                form = {
                  ...contentArr[0].actionCommon,
                  ...contentArr[0].areaCommon,
                  ...contentArr[0].fontCommon,
                  winName: content.winName,
                  key: content.key,
                  type: content.type,
                  rowCount: content.row,
                  colCount: content.column,
                  tableUrl: content.tableUrl,
                  contentArr: contentArr
                };
                form.showFontSize = this.getShowFontSize(form.fontName, form.fontSize);
                form.innerContent = contentArr.map(item => item.content);
                form.widthArr = contentArr.map(item => item.areaCommon.width);
                form.heightArr = contentArr.map(item => item.areaCommon.height);
                let tempWidth = 0,tempHeight = 0;
                for(let i = 0;i < form.colCount;i++){
                  tempWidth += form.widthArr[i]
                }
                for(let i = 0;i < form.rowCount;i++){
                  tempHeight += form.heightArr[i]
                }
                form.width = tempWidth;
                form.height = tempHeight;
              }
              this.options.windowInfoList.push(form);
              if (this.pageType == 3) {
                this.createTemplate(content.type, content.winName, this.options.windowInfoList[i], false);
              }
            }
            console.log(this.options);
            this.ledScreen = new LedScreen(this.options, this.$bus, this.$message, 2);
            
            //详情
            if (this.pageType == 2) {
              this.$nextTick(() => {
                this.form.proName = form.proName;
                this.temp = form.relType == 1 ? form.devName : form.tagName;
              });
            }
          }
        });
        // this.imgUrl = data.imgUrl;
      } else {
        this.options = {
          pro:{
            width: 224,
            height: 64,
            zoom: 1
          },
          windowInfoList: []
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.imgBox {
  display: flex;
  background-color: #f1f1f1;
  justify-content: center;
  align-items: center;
  width: 100%;
  .img {
    width: 100%;
    height: auto;
  }
}
.play-tab{
  display: flex;
  flex-direction: column;
  justify-content: center;
  .view {
    width: 740px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    // border-right: 1px solid #a7a7a7;
    background-image: url('../../assets/img/view-bg.svg');
    position: relative;

    #edit {
      height: auto;
      max-height: 240px;
      overflow: auto;
      width: 739px;
      #screen_size{
        position: absolute;
      }
    }
    .screen{
      background-color: #000;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
    }
    .zoom2 .screen{background-image:url();background-repeat:repeat;}
    .zoom4 .screen{background-image:url();background-repeat:repeat;}
    .zoom8 .screen{background-image:url();background-repeat:repeat;}
  }
  .handle-box{
    width: 740px;
    height: 40px;
    .screenpreview {
      border: 1px solid #6abbff;
      position: absolute;
      height: 28px;
      z-index: 999;
      .prevpage {
        background-image: url('../../assets/img/program_icon.svg');
        width: 26px;
        height: 26px;
        background-position: -18px -1983px;
        cursor: pointer;
        float: left;
        background-color: #fff;
      }
      .page {
        background: #6abbff;
        color: #fff;
        float: left;
        font-size: 12px;
        height: 26px;
        line-height: 26px;
        padding: 0 8px;
        width: auto;
        margin: 0 auto;
        text-align: center;
      }
      .nextpage {
        background-image: url('../../assets/img/program_icon.svg');
        width: 26px;
        height: 26px;
        background-position: -61px -1983px;
        cursor: pointer;
        float: left;
        background-color: #fff;
      }
      .playani {
        background-image: url('../../assets/img/program_icon.svg');
        width: 26px;
        height: 26px;
        background-position: -19px -2051px;
        cursor: pointer;
        float: left;
        background-color: #fff;
        border-left: 1px solid #6abbff;
      }
    }
    
  }
}

</style>
